<template>
    <div ref="chart01" class="chart-1"></div>
</template>
<script>
import * as echarts from "echarts"
import http from "@/http";
var colorArr = ["rgb(250,105,0)", "rgb(254,33,30)", "rgb(22,239,214)", "rgb(44,109,252)", "rgb(11,167,44)"].reverse()
export default {
    data() {
        return {
            m: null,
            o: {
               
                title: {
                    text: "地区销量趋势",
                    left: 20,
                    top: 10,
                    textStyle: {
                        color: "#fff",
                        fontSize: 22,
                        fontWeight: "bold"
                    }
                },
                 color: colorArr,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    top:35,
                    data: [],
                    icon: "circle",
                    textStyle: {
                        color: "#fff"
                    }
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis:
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    splitLine: {
                        show: false
                    }
                },

                yAxis:
                {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true
                    }
                },

                series: []
            }
        }
    },

    methods: {
        //获取数据
        async getData() {
            let ret = await http.get("/trend.json")
            //修改x轴的数据
            this.o.xAxis.data = ret.common.month;
            //修改图例数据
            this.o.legend.data = ret.map.data.map(item => item.name)
            //修改series
            ret.map.data.forEach((item, index) => {
                this.o.series.push(
                    {
                        name: item.name,
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        showsymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: colorArr[index]
                                },
                                {
                                    offset: 1,
                                    color: colorArr[index].replace(")", ",0)")
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: item.data
                    }
                )
            })
            this.m.setOption(this.o)
        }
    },

    mounted() {
        this.m = echarts.init(this.$refs.chart01)
        this.m.setOption(this.o)

        this.getData()
    }
}
</script>
<style scoped>
.chart-1 {
    height: 100%;
}
</style>